<template>
  <div class="div">
    <div class="zao">早上好!Daisy</div>
    <div
      class="jumin"
      v-for="(obj, index) in list"
      :key="index"
      style="left: 40px"
    >
      <img :src="obj.img" alt="" class="img" />
      <span class="name">{{ obj.name }}</span>
      <span :class="'count' + (index + 1)"
        ><b>{{ obj.count }}</b></span
      >
    </div>

    <div class="div2">
      <span class="sp">数据概况</span>
      <Echarts1
        style="width: 830px; height: 420px; margin-top: 55px; margin-left: 10px"
      />
    </div>

    <div class="div4">
      <span class="daiban">待办提醒</span>
      <div class="div5"></div>
      <div class="div6" v-for="(obj2, index) in get" :key="index">
        <span class="objcount2" style="margin-top: 0px">{{ obj2.count1 }}</span>
        <p class="objname2">{{ obj2.name2 }}</p>
        <img class="objimg2" :src="obj2.img2" alt="" />
      </div>
    </div>

    <div class="div7">
      <div style="padding-top: 20px; margin-left: 20px">居民标签</div>
      <verbar class="verbar">
        <Echarts2
          style="
            width: 300px;
            height: 320px;
            margin-top: 25px;
            margin-left: 10px;
          "
        />
      </verbar>
    </div>

    <div class="div8">
      
        <div
          class="res-2"
          v-for="obj in add"
          :key="obj.id"
          @click="resident(obj.id)"
        >
          <div class="res-5"><img src="u1699.png"  class="res-img" /></div>
          <div class="res-6">
            <span class="sp-1">{{ obj.name }}</span>
            <span class="sp-2">{{ obj.age }}岁</span>
          </div>
          <div class="res-7">
            <div class="res-3">
              {{ obj.signing_status === 1 ? "签约中" : "以签约" }}
            </div>
          </div>

          <div class="res-4">
            {{
              obj.residentLabel === 1
                ? "高血压"
                : obj.residentlabel === 2
                ? "冠心病"
                : "高血糖"
            }}
          </div>

        </div>
      
    </div>

    <div class="div10">
      <div style="padding-top: 20px; margin-left: 20px">本周签约概况</div>

      <div class="div11">
        <Biao1 :arrlist="arrlist" />
      </div>
    </div>
  </div>
</template>
<script>
import Echarts1 from "../control/echarts1.vue";
import Biao1 from "../control/biao1.vue";
import Echarts2 from "../control/echarts2.vue";

export default {
  components: {
    Echarts1,
    Biao1,
    Echarts2,
  },
  methods: {
    into(){
        this.$axios({
      url: "api/inhabitant/findInhabitant",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.add[0] = res.data.data[0];
      this.add[1] = res.data.data[1];
      this.add[2] = res.data.data[2];
      console.log(this.list);
    });
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
     resident(val){
       this.into();
      // this.$router.push('/Healthy');
      this.$router.push({path:'/Healthy',query:{id:val}});
    }
  },
  data() {
    return {
      list: [
        {
          id: 1,
          img: "居民总数量.png",
          name: "居民总数量",
          count: null,
        },
        {
          id: 2,
          img: "签约居民数量.png",
          name: "签约居民数量",
          count: null,
        },
        {
          id: 3,
          img: "待处理服务量.png",
          name: "待处理服务量",
          count: null,
        },
        {
          id: 4,
          img: "已完成服务量.png",
          name: "已完成服务量",
          count: null,
        },
      ],
      arr: [
        { id: 5, img1: "蓝.png", name1: "居民数量" },
        { id: 6, img1: "绿.png", name1: "签约量" },
        { id: 7, img1: "红.png", name1: "服务量" },
      ],
      get: [
        { id: 8, count1: 10, name2: "待审核签约申请", img2: "红.png" },
        { id: 9, count1: 30, name2: "待审核服务申请", img2: "红.png" },
        { id: 10, count1: 7, name2: "待完成服务", img2: "红.png" },
        { id: 11, count1: 107, name2: "待回复提醒", img2: "红.png" },
        { id: 12, count1: 23, name2: "待处理签约", img2: "红.png" },
      ],

      add: [],
      arrlist: [
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134,
        //   data6: 120,
        //   data7: 109,
        // },
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134,
        //   data6: 120,
        //   data7: 109,
        // },
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134,
        //   data6: 120,
        //   data7: 109,
        // },
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134,
        //   data6: 120,
        //   data7: 109,
        // },
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134, 
        //   data6: 120,
        //   data7: 109,
        // },
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134,
        //   data6: 120,
        //   data7: 109,
        // },
        // {
        //   groupp: "李明明团队",
        //   data: 50,
        //   data2: 100,
        //   data3: 150,
        //   data4: 146,
        //   data5: 134,
        //   data6: 120,
        //   data7: 109,
        // },
      ],
    };
  },

  mounted() {
    this.into();
    this.$axios({
      url: "api/inhabitant/findByCountId",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list[0].count = res.data;
    });
    this.$axios({
      url: "api/inhabitant/findByStatusCount",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list[1].count = res.data;
    });
    this.$axios({
      url: "api/conclude/findConcludeByStateCountTwo",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list[2].count = res.data;
    });
    this.$axios({
      url: "api/inhabitant/findByStatusCount",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.list[3].count = res.data;
    });
      this.$axios({
      url: "api/inhabitant/findInhabitantByDateCount",
      mounted: "GET",
    }).then((res) => {
      console.log(res);
      this.arrlist= res.data.data;
      // alert( res.data)
    });
  },
};
</script>

<style>
.res-7{
  float: left;
  width: 100%;
}
.res-4{
  float: left;
  width: 50%;
  height: 50px;
  /* margin-bottom: 100px; */
  margin-top: 20px;
  background-color: #fff1f0;
  -webkit-border-radius: 50px;
  margin-left: 25%;
  line-height: 50px;
  text-align: center;
  color: #fa746b;
}
.res-3{
  width: 30%;
  height: 30px;
  float: left;
  margin-left: 35%;
  margin-top: 10px;
  font-size: 80%;
  background-color: #28d094;
  -webkit-border-radius: 50px;
  line-height: 30px;
  text-align: center;
  color: #fff;

}
.sp-1{
  float: left;
  margin-left: 70px;
  font-size: 120%

}
.sp-2{
  float: left;
  font-size: 80%;
  margin-top: 10px;
  margin-left: 5px;
}
.res-6{
  float: left;
  width: 100%;
  margin-top: 10px;
}
.res-5 {
  width: 80px;
  height: 80px;
  float: left;
  background-color: rgb(26, 227, 127);
  background-color: #fff;
  -webkit-border-radius: 90px;
  border: 1px solid rgb(197, 174, 174);
  margin-left: 30%;
  margin-top: 50px  ;
}
.res-img {
  width: 70%;
  height: 70%;
  margin-left: 15%;
  margin-top: 15%;
}
.res-2:hover{
  background-color: #f5f9fb;
}
.res-2 {
  width: 30%;
  /* height: 1000px; */
  height: 90%;
    float: left;
  margin-left: 2.5%;
  margin-top: 300px;
  /* background-color: red; */
  background-color: #fff;
  margin-top: 10px;
   background-color: #fff;
  -webkit-border-radius: 20px;
  border: 1px solid rgb(188, 179, 179);
  box-shadow:  0px 0px 3px 3px rgb(241, 236, 236);
}
/* *{
   margin: 0 auto;
   padding: 0;
} */
.verbar {
  width: 320px;
  height: 340px;
  margin-top: 5px;
  margin-left: 20px;
  background-color: white;
  border-radius: 6px;
  float: left;
}
.ban {
  width: 132px;
  height: 35px;
  margin-left: 50px;
  margin-top: 20px;
  background-color: #2984f8;
  color: white;
  border-radius: 5px;
  border-style: none;
}
.ban:hover {
  background-color: #519bf9;
}
td {
  text-align: center;
}
.div11 {
  width: 1050px;
  height: 440px;
  margin-left: 30px;
}
.div10 {
  width: 1130px;
  height: 474px;
  margin-left: 60px;
  margin-top: 20px;
  float: left;
  background-color: white;
}

.div9:hover {
  background-color: rgba(41, 132, 248, 0.0588235294117647);
}
#res1 {
  float: left;
  white-space: 32%;
  height: 300px;
  margin-top: 5%;
  margin-left: 1%;
}
.div8 {
  width: 769px;
  height: 384px;
  float: left;
  margin-left: 20px;
  margin-top: 20px;

  background-color: white;
}
.div7 {
  width: 340px;
  height: 384px;
  margin-left: 60px;
  margin-top: 20px;
  float: left;
  background-color: white;
}
.objimg2 {
  margin-left: 240px;
}
.objname2 {
  font-size: 13px;
  top: 20px;
  left: 20px;
  color: #999999;
  position: absolute;
}
.objcount2 {
  top: 0px;
  left: 20px;
  font-size: 20px;
  position: absolute;
}
.div6 {
  margin-top: 60px;
  position: relative;
}
.div5 {
  width: 241px;
  height: 2px;
  font-size: 13px;
  background-color: #f2f7fb;
  top: 60px;
  position: absolute;
}
.daiban {
  width: 64px;
  height: 22px;
  left: 20px;
  top: 25px;
  position: absolute;
}
.div4 {
  width: 265px;
  height: 451px;
  margin-left: 15px;
  margin-top: 20px;
  float: left;
  background-color: white;
  border-radius: 8px;
  position: relative;
}
.el {
  top: 130px;
  position: absolute;
}
.div3 {
  margin-left: 30px;
  margin-top: 70px;
  font-size: 13px;
}
.sp {
  left: 20px;
  top: 20px;
  font-size: 16px;
  position: absolute;
}
.div2 {
  width: 843px;
  height: 451px;
  margin-left: 60px;
  margin-top: 20px;
  display: flex;
  float: left;
  background-color: white;
  border-radius: 8px;
  position: relative;
}
.count1 {
  top: 60px;
  font-size: 30px;
  color: #2984f8;
  position: absolute;
}
.count2 {
  top: 60px;
  font-size: 30px;
  color: rgba(40, 208, 148, 0.898039215686275);
  position: absolute;
}
.count3 {
  top: 60px;
  font-size: 30px;
  color: #fddb78;
  position: absolute;
}
.count4 {
  top: 60px;
  font-size: 30px;
  color: #fa746b;
  position: absolute;
}
.name {
  top: 30px;
  color: #999999;
  font-size: 13px;
  position: absolute;
}
.img {
  width: 93px;
  height: 93px;
  margin-top: 25px;
}
.jumin {
  width: 265px;
  height: 121px;
  margin-left: 20px;
  margin-top: 40px;
  border-radius: 10px;
  float: left;
  background-color: white;
  position: relative;
}
.zao {
  margin-left: 60px;
  padding-top: 45px;
  font-size: 18px;
}
.div {
  width: 1250px;
  height: 1700px;
  background-color: #f2f7fb;
  margin: auto;
}
</style>